프로젝트 - 축구 팀 관리 팀 프로젝트 - 포메이션 선수이름 넣기 지난번에 1번에서 고른 선수가 2번 원에서 뜨는 에러가 발생했다 각 원에 맞는 핸들러를 따로 만들었고 따로 걸어주었는데도 발생한 오류였다 그래서 뭐가 문제인지 혼자 이것저것 만져보다가 이유를 알았다! 전에 만들 때 팝업을 내가 만든게 아니다 보니 난 draggable과 menu가 한 세트인줄 알았다 그래서 2번 원을 만들때도 draggable과 menu를 똑같이 복사해서 넣어주었다 그런데 2... 프로젝트 - 축구 팀 관리ReactReact 팀 프로젝트 - 포메이션판 구현 2 1에서는 draggable로 요소를 움직일 수있게하고 그 요소를 11개로 늘리는 것 까지 하고 종료하였다 오늘은 각 위치의 defaultPosition을 4-4-2 포메이션으로 잡고 x, y값의 좌표가 바뀌는 대로 포지션도 바뀌도록 구현할 것이다 우선 x, y값을 알아보기 위해서 draggable 기본 함수인 onDrag 를 활용해보도록 하자 onDrag는 드래그가 움직이는 동안 일어나는 함... 프로젝트 - 축구 팀 관리ReactReact 팀 프로젝트 - 소셜 로그인(카카오) 테스트를 할 수 있게 간단하게 서버를 만들고 페이지를 만들어보자 그리고 카카오, 구글 API로 로그인을 할 것이기 때문에 어떻게 진행되는지 찾아보자 우리는 리액트와 스프링으로 개발을 하기로 하였다 이 블로그에 리액트, 스프링으로 구현하는 방법이 굉장히 잘 나와있어서 이 블로그를 나중에 참고할 것이고 현재는 프론트에서만 확인을 해봐야 돼서 이 블로그를 참고하였다 우선 사이트에 들어가서 로그인을... React프로젝트 - 축구 팀 관리React 팀 프로젝트 - 추가정보입력 우선 앞에서 하다가 멈췄으니까 토큰을 이용해서 정보를 받아오자 원래 이 부분은 백에서 하는 부분이지만 테스트를 위해 하는거라 블로그의 내용을 보고 그대로 따라했다 public/index.html에 아래 코드를 Head 태그 안에 넣어주었다 그리고 App.js를 블로그를 보고 따라하면 또 에러가 떠서 아래 코드처럼 바꿔주었다 Auth.js 블로그에서는 usehistory를 사용하고 있는데 이거... React프로젝트 - 축구 팀 관리React 팀 프로젝트 - 소셜 로그인 데이터 전송 방식 변경 처음에는 바디에 토큰과 어떤 토큰인지를 알려주는 ID 값을 넣어서 포스트로 전송하였다 그런데 백에서 API를 하나로 받지않고 소셜로그인 별로 분기해서 API를 만든다고 하여서 따로 보내야 하고 토큰만 보내주면 된다고 GET 방식으로 쿼리 헤더데이터에 토큰을 넣어서 보내달라고 하였다 그래서 현재 있는 코드에서 GET으로 변경하고 params로 데이터를 넣어서 전송하였다 카카오 구글 이렇게 변경... React프로젝트 - 축구 팀 관리React
팀 프로젝트 - 포메이션 선수이름 넣기 지난번에 1번에서 고른 선수가 2번 원에서 뜨는 에러가 발생했다 각 원에 맞는 핸들러를 따로 만들었고 따로 걸어주었는데도 발생한 오류였다 그래서 뭐가 문제인지 혼자 이것저것 만져보다가 이유를 알았다! 전에 만들 때 팝업을 내가 만든게 아니다 보니 난 draggable과 menu가 한 세트인줄 알았다 그래서 2번 원을 만들때도 draggable과 menu를 똑같이 복사해서 넣어주었다 그런데 2... 프로젝트 - 축구 팀 관리ReactReact 팀 프로젝트 - 포메이션판 구현 2 1에서는 draggable로 요소를 움직일 수있게하고 그 요소를 11개로 늘리는 것 까지 하고 종료하였다 오늘은 각 위치의 defaultPosition을 4-4-2 포메이션으로 잡고 x, y값의 좌표가 바뀌는 대로 포지션도 바뀌도록 구현할 것이다 우선 x, y값을 알아보기 위해서 draggable 기본 함수인 onDrag 를 활용해보도록 하자 onDrag는 드래그가 움직이는 동안 일어나는 함... 프로젝트 - 축구 팀 관리ReactReact 팀 프로젝트 - 소셜 로그인(카카오) 테스트를 할 수 있게 간단하게 서버를 만들고 페이지를 만들어보자 그리고 카카오, 구글 API로 로그인을 할 것이기 때문에 어떻게 진행되는지 찾아보자 우리는 리액트와 스프링으로 개발을 하기로 하였다 이 블로그에 리액트, 스프링으로 구현하는 방법이 굉장히 잘 나와있어서 이 블로그를 나중에 참고할 것이고 현재는 프론트에서만 확인을 해봐야 돼서 이 블로그를 참고하였다 우선 사이트에 들어가서 로그인을... React프로젝트 - 축구 팀 관리React 팀 프로젝트 - 추가정보입력 우선 앞에서 하다가 멈췄으니까 토큰을 이용해서 정보를 받아오자 원래 이 부분은 백에서 하는 부분이지만 테스트를 위해 하는거라 블로그의 내용을 보고 그대로 따라했다 public/index.html에 아래 코드를 Head 태그 안에 넣어주었다 그리고 App.js를 블로그를 보고 따라하면 또 에러가 떠서 아래 코드처럼 바꿔주었다 Auth.js 블로그에서는 usehistory를 사용하고 있는데 이거... React프로젝트 - 축구 팀 관리React 팀 프로젝트 - 소셜 로그인 데이터 전송 방식 변경 처음에는 바디에 토큰과 어떤 토큰인지를 알려주는 ID 값을 넣어서 포스트로 전송하였다 그런데 백에서 API를 하나로 받지않고 소셜로그인 별로 분기해서 API를 만든다고 하여서 따로 보내야 하고 토큰만 보내주면 된다고 GET 방식으로 쿼리 헤더데이터에 토큰을 넣어서 보내달라고 하였다 그래서 현재 있는 코드에서 GET으로 변경하고 params로 데이터를 넣어서 전송하였다 카카오 구글 이렇게 변경... React프로젝트 - 축구 팀 관리React